<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>遍历数组</h1>
    <input type="text" placeholder="请输入查找对象" v-model="keyWord">
    <ul>
        <li v-for="(p,index) in filPersons" :key="index">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    // new Vue({
    //     el:'#root',
    //     data:{
    //         keyWord:'',
    //         persons:[
    //             {id:'001',name:'马冬梅',age:12,sex:'nv'},
    //             {id:'002',name:'周冬雨',age:14,sex:'nv'},
    //             {id:'003',name:'周杰伦',age:16,sex:'nan'},
    //             {id:'004',name:'温兆伦',age:17,sex:'nan'}
    //         ],
    //     },
    //     filPersons:[],
    //     watch:{
    //         keyWord:{
    //             immediate:true,
    //             handler(val){
    //                 console.log('被改了',val)
    //                 this.filPersons=this.persons.filter((p)=>{
    //                     return p.name.indexOf(val)!==-1
    //                 })
    //             }
    //         }
    //     }
    //})
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'马冬梅',age:12,sex:'nv'},
                {id:'002',name:'周冬雨',age:14,sex:'nv'},
                {id:'003',name:'周杰伦',age:16,sex:'nan'},
                {id:'004',name:'温兆伦',age:17,sex:'nan'}
            ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!==-1
                })
            }
        }
    })

</script>
</html>